<template>
  <h1>{{ number }}</h1>
  <!-- 获取多个DOM节点 ref属性需要绑定一个函数 -->
  <div v-for="i in 4" :key="i" :ref="setItemRef">{{ i }}</div>
  <button @click="number++">加油~</button>
</template>

<script>
import { onBeforeUpdate, onUpdated, ref } from 'vue'

export default {
  setup() {
    const number = ref(0)
    let itemRefs = []

    // 在函数形参中获取到真实 DOM 节点
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }

    // 💥注意：视图更新的时候，ref 属性绑定的函数会被多次触发，所以需要在更新是重置数组
    onBeforeUpdate(() => {
      console.log('视图更新了');
      itemRefs = []
    })

    onUpdated(() => {
      console.log(itemRefs);
    })

    return { setItemRef, number }
  },
}
</script>

<style></style>
